<script setup lang="ts">
import { computed, watch } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import type { GlobalDataProps } from './stores/interface'

defineOptions({
  name: 'App'
})
const store = useStore<GlobalDataProps>()
const route = useRoute()
const isLoading = computed(() => store.getters.isLoading)
const showLoading = computed(() => isLoading.value && !route.meta.disableLoading)
const error = computed(() => store.state.global.error)
watch(() => error.value.status, (errorValue) => {
  if (errorValue) {
    message.error(error.value.message || '未知错误', 2)
  }
})

</script>

<template>
  <div class="app-container">
    <a-spin v-if="showLoading" tip="读取中" class="global-spinner" />
    <router-view />
  </div>
</template>

<style scoped>
.app-container .global-spinner {
  position: fixed;
  top: 10px;
  right: 50%;
}
</style>
